<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>amStock Example</title>
		<link rel="stylesheet" href="../amcharts/style.css" type="text/css">

		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
		<script src="../amcharts/serial.js" type="text/javascript"></script>
		<script src="../amcharts/amstock.js" type="text/javascript"></script>

		<script>
			var chartData = [];
			generateChartData();


			function generateChartData() {
				var firstDate = new Date();
				firstDate.setHours(0, 0, 0, 0);
				firstDate.setDate(firstDate.getDate() - 2000);

				for (var i = 0; i < 2000; i++) {
					var newDate = new Date(firstDate);

					newDate.setDate(newDate.getDate() + i);

					var open = Math.round(Math.random() * (30) + 100);
					var close = open + Math.round(Math.random() * (15) - Math.random() * 10);

					var low;
					if (open < close) {
						low = open - Math.round(Math.random() * 5);
					} else {
						low = close - Math.round(Math.random() * 5);
					}

					var high;
					if (open < close) {
						high = close + Math.round(Math.random() * 5);
					} else {
						high = open + Math.round(Math.random() * 5);
					}

					var volume = Math.round(Math.random() * (1000 + i)) + 100 + i;

					var value = Math.round(Math.random() * (30) + 100);

					chartData[i] = ({
						date: newDate,
						open: open,
						close: close,
						high: high,
						low: low,
						volume: volume,
						value: value
					});
				}
			}

			AmCharts.makeChart("chartdiv", {
				type: "stock",

				dataSets: [{
					fieldMappings: [{
						fromField: "open",
						toField: "open"
					}, {
						fromField: "close",
						toField: "close"
					}, {
						fromField: "high",
						toField: "high"
					}, {
						fromField: "low",
						toField: "low"
					}, {
						fromField: "volume",
						toField: "volume"
					}, {
						fromField: "value",
						toField: "value"
					}],

					color: "#7f8da9",
					dataProvider: chartData,
					title: "West Stock",
					categoryField: "date"
				}, {
					fieldMappings: [{
						fromField: "value",
						toField: "value"
					}],
					color: "#fac314",
					dataProvider: chartData,
					compared: true,
					title: "East Stock",
					categoryField: "date"
				}],


				panels: [{
						title: "Value",
						showCategoryAxis: false,
						percentHeight: 70,
						valueAxes: [{
							id:"v1",
							dashLength: 5
						}],

						categoryAxis: {
							dashLength: 5
						},

						stockGraphs: [{
							type: "candlestick",
							id: "g1",
							openField: "open",
							closeField: "close",
							highField: "high",
							lowField: "low",
							valueField: "close",
							lineColor: "#7f8da9",
							fillColors: "#7f8da9",
							negativeLineColor: "#db4c3c",
							negativeFillColors: "#db4c3c",
							fillAlphas: 1,
							useDataSetColors: false,
							comparable: true,
							compareField: "value",
							showBalloon: false
						}],

						stockLegend: {
							valueTextRegular: undefined,
							periodValueTextComparing: "[[percents.value.close]]%"
						}
					},

					{
						title: "Volume",
						percentHeight: 30,
						marginTop: 1,
						showCategoryAxis: true,
						valueAxes: [{
							id:"v2",
							dashLength: 5
						}],

						categoryAxis: {
							dashLength: 5
						},

						stockGraphs: [{
							valueField: "volume",
							type: "column",
							showBalloon: false,
							fillAlphas: 1
						}],

						stockLegend: {
							markerType: "none",
							markerSize: 0,
							labelText: "",
							periodValueTextRegular: "[[value.close]]"
						}
					}
				],

				chartCursorSettings: {
					valueLineEnabled:true,
					valueLineBalloonEnabled:true
				},


				chartScrollbarSettings: {
					graph: "g1",
					graphType: "line",
					usePeriod: "WW",
					updateOnReleaseOnly:false
				},

				periodSelector: {
					position: "bottom",
					periods: [{
						period: "DD",
						count: 10,
						label: "10 days"
					}, {
						period: "MM",
						selected: true,
						count: 1,
						label: "1 month"
					}, {
						period: "YYYY",
						count: 1,
						label: "1 year"
					}, {
						period: "YTD",
						label: "YTD"
					}, {
						period: "MAX",
						label: "MAX"
					}]
				}
			});

		</script>
	</head>
	<body style="background-color:#FFFFFF">
		<div id="chartdiv" style="width:100%; height:600px;"></div>
	</body>

</html>